<template>
  <div class="notice container">
    <uni-nav-bar dark color="#fff" backgroundColor="#323232" background-color="#007AFF" status-bar
      left-icon="left" title="公告" @clickLeft="$ui.back()" />
    <div class="notice-top-tag" />
    <div class="notice-list div-sizing">
      <div class="notice-title van-multi-ellipsis--l2">
        {{ info.title }}
      </div>
      <div
        class="notice-content"
        v-html="info.content"
      />
      <div class="notice-time div-sizing">
        {{ info.time }}
      </div>
    </div>
  </div>
</template>

<script>
import { getNoticeInfo } from '@/api/index'
export default {
  data() {
    return {
      info: {},
      id: '',
      checked: false,
      loading: false
    }
  },
  created() {
    this.id = this.$route.query.id
    this.get_info()
  },
  methods: {
    get_info() {
      getNoticeInfo({ id: this.id }).then(res => {
        if (res.code === 1) {
          this.info = res.data
        } else {
          this.$ui.toast(res.msg)
          this.$router.go(-1)
        }
      })
    },
    //
    user_agent() {
      const vm = this
      vm.loading = true
      if (!vm.checked) {
        vm.loading = false
        vm.$ui.toast('请先勾选已阅读条款')
        return
      }
      vm.$cookie.set('checked', vm.checked)
      vm.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.notice {
  // min-height: 100vh;
  padding: 2rem 20px 20px;
  display: flex;
  background: #f6f8f9;
  .notice-top-tag {
    width: 100%;
    height: 504px;
    position: fixed;
    top: 0;
    left: 0;
    // background: #15667d;
    background: rgba(#3caf5e 10%, rgba(#3caf5e, 0.3), rgba(#3caf5e, 0));
    background: -webkit-linear-gradient(
      #3caf5e 10%,
      rgba(#3caf5e, 0.3),
      rgba(#3caf5e, 0)
    );
    background: -moz-linear-gradient(
      #3caf5e 10%,
      rgba(#3caf5e, 0.3),
      rgba(#3caf5e, 0)
    );
    background: -o-linear-gradient(
      #3caf5e 10%,
      rgba(#3caf5e, 0.3),
      rgba(#3caf5e, 0)
    );
  }
  .notice-list {
    flex: 1;
    padding: 20px 30px;
    overflow-y: scroll;
    z-index: 2;
    background: #ffffff;
    & > div {
      width: 100%;
    }
  }
  .notice-content {
    color: #282828;
    line-height: 34px;
  }
  .notice-title {
    font-size: 36px;
    color: #000000;
    margin-bottom: 20px;
  }
  .notice-time {
    font-size: 24px;
    color: #989898;
    padding: 60px 20px;
    // text-align: right;
  }
}
</style>

<style lang="less">
.notice {
  .van-checkbox {
    .van-checkbox__label {
      color: #989898;
    }
  }
}
</style>
